<template>
  <el-button @click="btn2">这是个按钮</el-button>
  <div>
    <input type="file" @change="handleFileChange" ref="fileInput" />
    <el-button @click="uploadFile">上传文件</el-button>
  </div>
  <div>
    <el-button @click="downloadFile">下载文件</el-button>
  </div>
</template>

<script setup>
import {ref} from 'vue'
import axios from "axios";
axios.defaults.withCredentials = true
const btn2 = () => {
  axios.get("api/a").then(res => {
    console.log(res.data)
  })
}
const selectedFile = ref(null);
const handleFileChange = (event) => {
  selectedFile.value = event.target.files[0];
};
const uploadFile = async () => {
  if (!selectedFile.value) {
    return;
  }
  const formData = new FormData();
  formData.append('file', selectedFile.value);

  try {
    const response = await axios.post('api/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    });
    console.log('文件上传成功', response.data);
  } catch (error) {
    console.error('文件上传失败', error);
  }
};
const downloadFile = async () => {
  try {
    // 发送 GET 请求，设置 responseType 为 'blob' 以获取文件流
    const response = await axios.get('api/dd/1.jpg', {
      responseType: 'blob'
    });

    // 创建 Blob 对象
    const blob = new Blob([response.data]);
    // 创建一个临时的 URL 来表示这个 Blob 对象
    const url = window.URL.createObjectURL(blob);

    // 创建一个 <a> 元素
    const link = document.createElement('a');
    // 设置 <a> 元素的 href 属性为临时 URL
    link.href = url;
    // 设置下载的文件名
    link.setAttribute('download', '2.jpg');

    // 将 <a> 元素添加到页面中
    document.body.appendChild(link);
    // 模拟点击 <a> 元素来触发下载
    link.click();

    // 下载完成后，移除 <a> 元素
    document.body.removeChild(link);
    // 释放临时 URL，避免内存泄漏
    window.URL.revokeObjectURL(url);
  } catch (error) {
    console.error('文件下载失败', error);
  }
};
</script>